<template>
  <div class="bigbox">
    <div>
      <img src="../public/img/icon01.png" class="icon01" />
    </div>
    <div>
      <span class="shouye">
        <router-link :to="{ path: '/index' }" class="tiaozhuan" id="shouye">
          首页
        </router-link>
      </span>
    </div>
    <div>
      <span class="allkechen">
        <router-link :to="{ path: '/allcourse' }" class="tiaozhuan">
          全部课程
        </router-link>
      </span>
    </div>
    <div>
      <span class="jiangshi">
        <router-link :to="{ path: '/teacher' }" class="tiaozhuan">
          成为讲师
        </router-link>
      </span>
    </div>
    <div>
      <span class="xuesheng">
        <router-link :to="{ path: '/student' }" class="tiaozhuan">
          优秀学生
        </router-link>
      </span>
    </div>
    <div>
      <span>
        <div
          class="avatar-wrapper"
          @mouseover="showDropdown = true"
          @mouseleave="showDropdown = false"
        >
          <template v-if="avatar">
            <img :src="avatar" alt="用户头像" class="avatar" />
          </template>
          <template v-else>
            <router-link :to="{ path: '/login' }" class="tiaozhuan">
              登录
            </router-link>
          </template>
          <ul v-if="showDropdown" class="dropdown">
            <li>
              <router-link :to="{ path: '/profile' }">我的资料</router-link>
            </li>
            <li v-if="avatar">
              <a href="#" @click.prevent="logout">退出登录</a>
            </li>
          </ul>
        </div>
      </span>
    </div>
    <div><span>|</span></div>
    <div>
      <span>
        <router-link :to="{ path: '/register' }" class="tiaozhuan" v-if="!loggedIn">
          注册
        </router-link>
      </span>
    </div>
  </div>
</template>

<script lang="ts">
export default {
  props: {
    avatar: String,
  },
  data() {
    return {
      showDropdown: false,
      loggedIn: false
    };
  },
  methods: {
    logout() {
      // 在这里添加用户退出登录的逻辑，例如清除本地存储的用户信息等
      // 跳转到登录页
       // 清除本地存储的用户信息
     localStorage.removeItem('userAvatar');
      this.$router.push({ path: '/login' });
      this.loggedIn = false;
  },
  login() {
      // 登录成功后将 loggedIn 设置为 true
      this.loggedIn = true;
    },
},
}
</script>


<style scoped>
.bigbox {
  height: 72px;
  display: flex;
  justify-content: space-evenly;
  align-items: center;

  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 999;
  background-color: white;
}

.icon01 {
  width: 112px;
  height: 44px;
}

span {
  font-size: 16px;
  display: inline-block;
  line-height: 72px;
}

.tiaozhuan {
  text-decoration: none;
  color: black;
}

.shouye {
  text-align: center;
  width: 88px;
  background-color: rgb(40, 178, 139);
}

#shouye {
  color: white;
}

.avatar-wrapper {
  position: relative;
}

.dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  background-color: white;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 1px 1px;
  list-style: none;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  margin-top: 0%;
}

 .dropdown li {
  margin-right: 40px;
  white-space: nowrap;
} 

.dropdown li:hover {
  background-color: #f5f5f5;
}

.avatar {
  width: 50px;
  height: auto;
  margin-top: 20px;
  margin-right: 40px;
  border-radius: 10px;
}

</style>